<!DOCTYPE html>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.text.DateFormat"%>
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>ETNA</title>

    <!-- Bootstrap Core CSS -->
    <link href="resources/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="resources/css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="resources/css/plugins/morris.css" rel="stylesheet">
    
    <link href="resources/css/ui.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">ETNA</a>
            </div>
            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b class="caret"></b></a>
                    <ul class="dropdown-menu message-dropdown">
                        <li class="message-preview">
                            <a href="#">
                                <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
                                    </span>
                                    <div class="media-body">
                                        <h5 class="media-heading"><strong>John Smith</strong>
                                        </h5>
                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="message-preview">
                            <a href="#">
                                <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
                                    </span>
                                    <div class="media-body">
                                        <h5 class="media-heading"><strong>John Smith</strong>
                                        </h5>
                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="message-preview">
                            <a href="#">
                                <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
                                    </span>
                                    <div class="media-body">
                                        <h5 class="media-heading"><strong>John Smith</strong>
                                        </h5>
                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="message-footer">
                            <a href="#">Read All New Messages</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> <b class="caret"></b></a>
                    <ul class="dropdown-menu alert-dropdown">
                        <li>
                            <a href="#">Alert Name <span class="label label-default">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-primary">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-success">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-info">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-warning">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-danger">Alert Badge</span></a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">View All</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> John Smith <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            <jsp:include page="menu.jsp" />
        </nav>

        <div id="page-wrapper">

<form method="POST" action="/EtnaTp2/gastosAdicionales">
			<div class="container-fluid" style="height: 900px;">

				<img alt="" src="resources/images/etnaicono.jpg">

				<span style="font-size: 25px; font-weight: bold;">Registrar Gastos Adicionales</span>
				<br></br>
				<c:if test="${mensaje != ''}">
					<c:if test="${resut == '1'}">
						<span style="background-color: #2cf565; font-size: 14px; color: white; font-weight: bold;">${mensaje}</span>
					</c:if>
				    <c:if test="${result != '1'}">
						<span style="background-color: red; font-size: 14px; color: white; font-weight: bold;">${mensaje}</span>
					</c:if>
				</c:if>

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Periodo</h3>
					</div>

					<div class="panel-body">
						<div class="col-lg-3">
							<div class="form-group">
								<label>Mes:</label> 
								<select class="form-control" name="mes" value="${mes}">
									<option value="">Seleccione</option>
									<c:forEach items="${lista}" var="periodo">
										<option value="${periodo.codigo}">${periodo.descripcion}</option>
									</c:forEach>
                                    
                                </select>

							</div>
							<div class="form-group">
								<label>Año:</label> 
								<select class="form-control" name="anio" value="${anio}">
									<option value="">Seleccione</option>
									<option value="2014">2014</option>
									<option value="2015">2015</option>
								</select>

							</div>

						</div>	
						<div class="col-lg-3">
							
							<div class="form-group">
								<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><br></br>	 
								<a id="lnkBuscar" style="border: 4px outset; padding: 2px; text-decoration: none; color: black;" href="buscaGastosAdicionales?anio=${anio}&mes=${mes}" onclick="return obtenerPeriodo();">Obtener Datos</a>
								<br></br>
								<button type="submit" class="btn btn-default" style="border: 4px outset; padding: 1px; text-decoration: none; color:black;" onclick="return verificarContenido();">Registrar Gastos Adicionales</button>
							</div>
							
						</div>

						<div class="col-lg-3">
							<div class="form-group">
							</div>
							<div class="form-group">
								
							</div>
							
						</div>
						


					</div>
				</div>

			
			<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Gastos Adicionales</h3>
					</div>
						<table border="1" style="border-collapse: separate !important; width: 100%; text-align: center;">
					    	<tr style="background-color: skyblue; font-weight: bold;">
								<td></td>
					    		<td>Descripción</td>
					    		<td>Importe</td>
					    		<td>Fecha de Emisión</td>
					    		<td>Proveedor</td>
					    	</tr>
					    	<c:forEach items="${listaComprobantes}" var="comprobantes">
						    	<tr>
									<td><input type="checkbox" value="${comprobantes.codigo}" style="chk1"></td>
						    		<td>${comprobantes.descripcion}</td>
						    		<td>${comprobantes.montoTotal}</td>
						    		<td>${comprobantes.fechaEmision}</td>
						    		<td>${comprobantes.proveedor}</td>
						    	</tr>
				    		</c:forEach>
				    	</table>

					

				</div>
				
				
				
				
			</div>

		<input type="hidden" name="idComprobantes" id="idComprobantes"/>
<input type="hidden" name="mes2" id="mes2" value="${mes}"/>
<input type="hidden" name="anio2" id="anio2" value="${anio}"/>
		
	</form>
			<!-- /.container-fluid -->
			
			
        </div>
        <!-- /#page-wrapper -->

    </div>
    
    
    
    
    <!-- /#wrapper -->
        <!-- jQuery -->
    <script src="resources/js/jquery.js"></script> 
    <script src="resources/js/jquery-ui.js"></script> 
   <script src="resources/js/jquery.ui.core.js"></script> 
      <script src="resources/js/jquery.ui.dialog.js"></script> 

    <!-- Bootstrap Core JavaScript -->
    <script src="resources/js/bootstrap.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="resources/js/plugins/morris/raphael.min.js"></script>
<!--     <script src="resources/js/plugins/morris/morris.min.js"></script> -->
<!--     <script src="resources/js/plugins/morris/morris-data.js"></script> -->
    
<script type="text/javascript">

function obtenerPeriodo(){
	var mesx=$('select[name="mes"] option:selected').val();
	var aniox=$('select[name="anio"] option:selected').val();
	if(mesx=='' || aniox==''){
		alert('Seleccione el periodo para buscar los gastos adicionales');
	}
	$('#lnkBuscar').attr('href','buscaGastosAdicionales?anio='+aniox+'&mes='+mesx);
}

function verificarContenido(){
	var x=0;
	var z=0;
	var y='';
	$('input:checkbox').each(function(index){
		if($( this ).is(':checked')){
			x++;
			if(z == 0){
				y=$( this ).val();
			}else{
				y=y + ',' + $( this ).val();
			}
			z++;
		}
		
	});
	$('#idComprobantes').val(y);

	if(x == 0){
		alert('Debe seleccionar al menos un comprobante de pago');
		return false;
	}else{
		return true;
	}
		
}

	$(function() {
		$.get("entregas/").done(function(data) {
			alert(data);
			//$("#nombre").val(data.nombre);

		});
		
		$("#btnBuscar").click(function() {

			var nombrev = $("#nombre").val();
			var apellidoPaternov = $("#apellidoPaterno").val();
			var apellidoMaternov = $("#apellidoMaterno").val();
			var direccionv = $("#direccion").val();
			var dataValue = {
				nombre : nombrev,
				apellidoPaterno : apellidoPaternov,
				apellidoMaterno : apellidoMaternov,
				direccion : direccionv
			};

			$.ajax({
				url : "empleadoUpd/1",
				type : "POST",
				data : JSON.stringify(dataValue),
				contentType : "application/json; charset=utf-8",
				dataType : "json",
			}).done(function(data) {
				alert(data);
			});

		});
	});
	
	
</script>	
</body>

</html>
	